<template>
  <div style="height: 108%;background-color: white" >
    <div class="formCard-content">
      <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
        <!-- 自定义按钮插槽演示 -->
        <template #customToolButtons>
          <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
          <el-button type="text" @click="screenClick(true)"  v-if="!isFullScreen" ><i class="iconfont  icon-FullScreen" />全屏</el-button>
          <el-button type="text" @click="screenClick(false)" v-if="isFullScreen" ><i class="iconfont  icon-ExitFullScreen" />退出全屏</el-button>
        </template>
      </v-form-designer>
    </div>

  </div>

</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      designerConfig: {
        resetFormJson: false,
        toolbarMaxWidth: 600
      },
      isFullScreen: false
    }
  },
  methods: {
    saveFormJson () {
      let formJson = this.$refs.vfDesigner.getFormJson()
      // TODO: 将formJson提交给后端保存接口，需自行实现！！
      this.$message.success('表单已保存！')
    },
    screenClick (isFull) {
      let routerName = ''
      if (isFull) {
        routerName = 'formDesigner'
        this.isFullScreen = true
      } else {
        routerName = 'form-designer'
        this.isFullScreen = false
      }
      this.$byStoreSet('isFullScreen', this.isFullScreen)
      this.$router.push({
        name: routerName
      })
    }
  },
  mounted () {
    let isFullScreen = this.$byStoreGet('isFullScreen')
    if (isFullScreen) {
      this.isFullScreen = isFullScreen
    }
  }
}
</script>

<style lang="less" scoped>

</style>
